<template>
    <div id="tableXY1">
        <table style="width: 100%" class="myTable">
            <tr v-for="(item, index) in column" :key="index">
                <td class="column" style="
           background: rgba(248, 248, 255, 0.5);
           font-weight: 700;
         ">
                    <span :style="{ color: item.colorText ? item.colorText : '#000' }">
                        {{ item.title }}
                    </span>
                </td>
                <td class="column" v-for="(itemData, indexData) in tableData" :key="indexData">
                    <div v-if="item.value === 'action'">
                        <el-button :type="itemAction.showType" @click="handClick(itemAction.clickMethods, itemData)"
                            v-for="(itemAction, indexAction) in item.action" :key="indexAction">{{
                                itemAction.clickName
                            }}</el-button>
                    </div>
                    <div v-else>
                        <div>
                            {{ itemData[item.value] }}
                            <!-- {{ item.value }} -->
                            <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> -->
                            <div class="edit-datasBody-td-progress">
                                <div v-if="item.value == 'progress'" class="edit-datasBody-td-progress-bg" :style="{
                                    background:
                                        itemData[item.value] >= 0.7
                                            ? '#33e35d'
                                            : 0.7 > itemData[item.value] >= 0.5
                                                ? '#fcdb3d'
                                                : 0.5 > itemData[item.value] >= 0.2
                                                    ? '#fba81f'
                                                    : '#f87169',
                                    height: itemData[item.value] * 35 + 'px',
                                }"></div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination> -->
    </div>
</template>
<script>
export default {
    name: "TableXY",
    props: {
        column: {
            type: Array,
            default: function () {
                return [];
            },
        },
        tableData: {
            type: Array,
            default: function () {
                return [];
            },
        },
    },
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            currentPage4: 1,
            total: 7,
            statusarr: [
                {
                    value: "选项1",
                    label: "黄金糕",
                },
                {
                    value: "选项2",
                    label: "双皮奶",
                },
                {
                    value: "选项3",
                    label: "蚵仔煎",
                },
                {
                    value: "选项4",
                    label: "龙须面",
                },
                {
                    value: "选项5",
                    label: "北京烤鸭",
                },
            ],
            status: "",
            starsCount: 800, //星星数量
            distance: 900, //间距
        };
    },
    mounted() {
        // this.tableData.forEach((ele, index) => {
        //     if (ele.progress != undefined) {
        //         console.log(ele.progress, index, "进度");
        //         console.log(ele.progress > 50 && ele.progress < 70, "50-70?");
        //     }
        // });
        console.log(this.$refs.starsRef.children);
        let starNodes = Array.from(this.$refs.starsRef.children);
        starNodes.forEach((item) => {
            let speed = 0.2 + Math.random() * 1;
            let thisDistance = this.distance + Math.random() * 300;
            item.style.transformOrigin = `0 0 ${thisDistance}px`;
            item.style.transform = `
               translate3d(0,0,-${thisDistance}px)
               rotateY(${Math.random() * 360}deg)
               rotateX(${Math.random() * -50}deg)
               scale(${speed},${speed})`;
        });
    },
    methods: {
        handClick(methods, row) {
            this.$emit("handClick", methods, row);
        },
        handleSizeChange(val) {
            this.pageSize = val;
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            console.log(`当前页: ${val}`);
        },
        statusChange() {
            console.log(this.status, "zzz");
        },
        goBack() {
            this.$router.push({
                path: "/Task/MyTask",
            })
        }
    }
}
</script>

<style scoped>
#tableXY1 {
    margin-bottom: 15px;
    /* position: absolute; */
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    /* background: radial-gradient(200% 100% at bottom center,
            #f7f7b6,
            #e96f92,
            #1b2947);
    background: radial-gradient(200% 105% at top center,
            #1b2947 10%,
            #75517d 60%,
            #c8699e 75%,
            #fcc5e4); */
    background-attachment: fixed;
    overflow: hidden;
}

.stars {
        transform: perspective(500px);
        transform-style: preserve-3d;
        position: absolute;
        perspective-origin: 50% 100%;
        left: 45%;
        animation: rotate 90s infinite linear;
        bottom: 0;
    }
    .star {
        width: 2px;
        height: 2px;
        background: #f7f7b6;
        position: absolute;
        left: 0;
        top: 0;
        backface-visibility: hidden;
    }

    .el-form--inline .el-form-item__label {
        color: #fff;
    }

    .myTable {
        width: 100% !important;
        margin: 0 auto;
        height: auto;
        overflow: scroll;
        /* display: block; */
        color: #fff;
        /* // background-color: rgb(213, 221, 248); */
        border-collapse: collapse;
        text-align: center;
        border: 1px solid #999;
       
    }
    tr:nth-child(1) {
            /* // background-color: #ebeef5; */
            background-color: rgba(248, 248, 255, 0.5);
            color: #000 !important;
            font-weight: 700;
            /* border: 1px solid #999; */
        }
        tr td:nth-of-type(1){
            width: 200px;
        }
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    /* ::-webkit-scrollbar {
        width: 14px;
        height: 14px;
        background-color: #f5f5f5;
    } */

    /*定义滚动条轨道 内阴影+圆角*/
    /* ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #f5f5f5;
    } */

    /*定义滑块 内阴影+圆角*/
    /* ::-webkit-scrollbar-thumb { */
        /* border-radius: 8px; */
        /* background: linear-gradient(-90deg, #ced9db 0%, #141414 100%); */
        /* // background: #fda34b; */
    /* } */

    .myTable td{
        border: 1px solid #999;
        /* // color: #fff; */
        height: 60px;
        line-height: 60px;
    }
    .myTable th {
        /* border: 1px solid #999; */
        /* // color: #fff; */
        height: 60px;
        line-height: 60px;
    }
    .myTable tr {
        width:100%;
    }
    .slotMain {
        padding: 0 4px;
    }

    /* // 进度条 */
    .edit-datasBody-td-progress {
        display: inline-block;
    }

    .edit-datasBody-td-progress-bg {
        width: 20px;
    }
.el-pagination {
    float: none;
    text-align: center;
}

@keyframes rotate {
    0% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
    }

    100% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
    }
}
</style>
